<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI问答助手</title>
    <!-- 引入第三方库 -->
    <script src="https://unpkg.com/marked@12.0.0/lib/marked.umd.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/@highlightjs/cdn-assets@11.9.0/styles/github-dark.min.css">
    <script src="https://unpkg.com/@highlightjs/cdn-assets@11.9.0/highlight.min.js"></script>
    <!-- 备用CDN -->
    <script>
        // 如果主要CDN加载失败，尝试备用CDN
        function loadFallbackScript(src, onerror) {
            var script = document.createElement('script');
            script.src = src;
            script.onerror = onerror;
            document.head.appendChild(script);
        }
        
        function loadFallbackCSS(href, onerror) {
            var link = document.createElement('link');
            link.rel = 'stylesheet';
            link.href = href;
            link.onerror = onerror;
            document.head.appendChild(link);
        }
        
        // 检查marked.js是否加载成功
        if (typeof marked === 'undefined') {
            loadFallbackScript('https://cdnjs.cloudflare.com/ajax/libs/marked/12.0.0/marked.min.js', function() {
                console.warn('marked.js加载失败，功能将受限');
            });
        }
        
        // 检查highlight.js是否加载成功
        if (typeof hljs === 'undefined') {
            loadFallbackScript('https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js', function() {
                console.warn('highlight.js加载失败，尝试本地备用方案');
                // 如果CDN都失败，使用简单的本地高亮方案
                loadSimpleHighlightFallback();
            });
            
            // 同时加载备用CSS样式
            loadFallbackCSS('https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css', function() {
                console.warn('highlight.js样式加载失败，使用基础样式');
                loadBasicCodeStyles();
            });
        } else {
            // 如果主要CDN加载成功，也加载样式
            loadFallbackCSS('https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css', function() {
                console.warn('highlight.js样式加载失败，使用基础样式');
                loadBasicCodeStyles();
            });
        }
        
        // 基础代码样式备用方案
        function loadBasicCodeStyles() {
            var style = document.createElement('style');
            style.textContent = `
                .hljs { display: block; overflow-x: auto; padding: 0.5em; background: #f6f8fa; color: #24292e; }
                .hljs-comment, .hljs-quote { color: #6a737d; font-style: italic; }
                .hljs-keyword, .hljs-selector-tag, .hljs-literal, .hljs-title, .hljs-section { color: #d73a49; }
                .hljs-string, .hljs-doctag, .hljs-subst { color: #032f62; }
                .hljs-number, .hljs-formula { color: #005cc5; }
                .hljs-name, .hljs-attr, .hljs-attribute { color: #6f42c1; }
                .hljs-symbol, .hljs-bullet, .hljs-link { color: #005cc5; }
                .hljs-built_in, .hljs-builtin-name { color: #e36209; }
                .hljs-meta { color: #6a737d; }
                .hljs-tag { color: #22863a; }
                .hljs-variable, .hljs-template-variable { color: #e36209; }
                .hljs-params { color: #6f42c1; }
                .hljs-type { color: #d73a49; }
                .hljs-function { color: #6f42c1; }
                .hljs-selector-id, .hljs-selector-class { color: #22863a; }
                .hljs-strong { font-weight: bold; }
                .hljs-emphasis { font-style: italic; }
            `;
            document.head.appendChild(style);
        }
        
        // 简单的高亮备用方案
        function loadSimpleHighlightFallback() {
            // 如果highlight.js完全不可用，使用简单的正则表达式高亮
            window.simpleHighlight = function(code, language) {
                var highlighted = code;
                
                // 简单的关键字高亮
                var keywords = {
                    'javascript': ['function', 'var', 'let', 'const', 'if', 'else', 'for', 'while', 'return', 'try', 'catch', 'finally', 'throw', 'new', 'in', 'instanceof', 'typeof', 'delete', 'void', 'with', 'default', 'case', 'break', 'continue', 'debugger', 'as', 'async', 'await', 'static', 'import', 'from', 'export'],
                    'html': ['<!DOCTYPE', '<html', '<head', '<body', '<div', '<p', '<span', '<h1', '<h2', '<h3', '<h4', '<h5', '<h6', '<ul', '<ol', '<li', '<a', '<img', '<button', '<input', '<form', '<table', '<tr', '<td', '<th', '<style', '<script'],
                    'css': ['@import', '@media', '@keyframes', '@font-face', 'margin', 'padding', 'border', 'background', 'color', 'font', 'display', 'position', 'float', 'clear', 'width', 'height']
                };
                
                if (keywords[language]) {
                    keywords[language].forEach(function(keyword) {
                        var regex = new RegExp('\\b' + keyword + '\\b', 'g');
                        highlighted = highlighted.replace(regex, '<span class="hljs-keyword">' + keyword + '</span>');
                    });
                }
                
                // 字符串高亮
                highlighted = highlighted.replace(/('.*?')/g, '<span class="hljs-string">$1</span>');
                highlighted = highlighted.replace(/(".*?")/g, '<span class="hljs-string">$1</span>');
                
                // 注释高亮
                highlighted = highlighted.replace(/(\/\/.*?$)/gm, '<span class="hljs-comment">$1</span>');
                highlighted = highlighted.replace(/(\/\*[\s\S]*?\*\/)/g, '<span class="hljs-comment">$1</span>');
                
                return '<pre><code class="hljs ' + language + '">' + highlighted + '</code></pre>';
            };
        }
    </script>
    <script>
        // 等待highlight.js加载完成后再注册语言
        function registerHighlightLanguages() {
            if (typeof hljs === 'undefined') {
                // 如果highlight.js未加载，延迟重试
                setTimeout(registerHighlightLanguages, 100);
                return;
            }
            
            // 检查highlight.js是否已经内置了这些语言，避免重复注册
            var builtInLanguages = ['javascript', 'js', 'html', 'xml', 'css'];
            var hasBuiltIn = false;
            
            builtInLanguages.forEach(function(lang) {
                if (hljs.getLanguage(lang)) {
                    hasBuiltIn = true;
                }
            });
            
            // 如果highlight.js已经有内置语言支持，跳过自定义注册
            if (hasBuiltIn) {
                console.log('使用highlight.js内置语言支持');
                return;
            }
            
            // 注册语言支持（仅当highlight.js没有内置支持时）
            try {
                hljs.registerLanguage('javascript', function(hljs) {
                return {
                    keywords: 'function var let const if else for while return try catch finally throw new in instanceof typeof delete void with default case break continue debugger as async await static import from export',
                    literals: 'true false null undefined NaN Infinity',
                    contains: [
                        hljs.APOS_STRING_MODE,
                        hljs.QUOTE_STRING_MODE,
                        hljs.C_LINE_COMMENT_MODE,
                        hljs.C_BLOCK_COMMENT_MODE,
                        hljs.C_NUMBER_MODE,
                        {
                            className: 'function',
                            beginKeywords: 'function', end: /\{/, excludeEnd: true,
                            contains: [
                                hljs.TITLE_MODE,
                                {
                                    className: 'params',
                                    begin: /\(/, end: /\)/,
                                    contains: [
                                        hljs.APOS_STRING_MODE,
                                        hljs.QUOTE_STRING_MODE,
                                        hljs.C_LINE_COMMENT_MODE,
                                        hljs.C_BLOCK_COMMENT_MODE
                                    ]
                                }
                            ]
                        }
                    ]
                };
            });
                
            hljs.registerLanguage('html', function(hljs) {
                    return {
                        contains: [
                            {
                                className: 'meta',
                                begin: '<!DOCTYPE', end: '>',
                                relevance: 10
                            },
                            {
                                begin: '<!--', end: '-->',
                                relevance: 10
                            },
                            {
                                begin: '<!\\[CDATA\\[', end: '\\]\\]>',
                                relevance: 10
                            },
                            {
                                begin: /<\?(php)?/, end: /\?>/,
                        subLanguage: 'php',
                        relevance: 1
                    },
                    {
                        className: 'tag',
                        begin: '</?', end: '/?>',
                        contains: [
                            {
                                className: 'name',
                                begin: /[^\/><\s]+/,
                                relevance: 0
                            },
                            {
                                begin: /\s/, end: /\s*/, endsWithParent: true,
                                contains: [
                                    {
                                        className: 'attr',
                                        begin: /[^\/><\s=]+/,
                                        relevance: 0
                                    },
                                    {
                                        begin: '=', endsWithParent: true, relevance: 0,
                                        contains: [
                                            {
                                                className: 'string',
                                                begin: /["']/, end: /["']/,
                                                contains: [hljs.BACKSLASH_ESCAPE]
                                            },
                                            {
                                                className: 'number',
                                                begin: /\b\d+(\.\d+)?/
                                            }
                                        ]
                                    }
                                ]
                            }
                        ]
                    }
                ]
            };
        });
        
        hljs.registerLanguage('css', function(hljs) {
            return {
                case_insensitive: true,
                illegal: /[=\/|'\$]/,
                contains: [
                    hljs.C_BLOCK_COMMENT_MODE,
                    {
                        className: 'selector-id', begin: /#[A-Za-z0-9_-]+/,
                        relevance: 10
                    },
                    {
                        className: 'selector-class', begin: /\.[A-Za-z0-9_-]+/,
                        relevance: 10
                    },
                    {
                        className: 'selector-attr',
                        begin: /\[/, end: /\]/,
                        contains: [
                            hljs.APOS_STRING_MODE,
                            hljs.QUOTE_STRING_MODE
                        ]
                    },
                    {
                        className: 'selector-pseudo',
                        begin: /:(:)?[a-zA-Z0-9\-_]+(\(.*\))?/
                    },
                    {
                        begin: '@(page|font-face|import|charset|namespace)',
                        lexemes: '@[a-z-]+',
                        keywords: {
                            keyword: '@page @font-face @import @charset @namespace'
                        }
                    },
                    {
                        className: 'attribute',
                        begin: /[a-zA-Z\-]+\s*:/, end: /;|$|\n/,
                        contains: [
                            hljs.CSS_NUMBER_MODE,
                            hljs.QUOTE_STRING_MODE,
                            hljs.APOS_STRING_MODE,
                            hljs.C_BLOCK_COMMENT_MODE,
                            {
                                className: 'function',
                                begin: hljs.IDENT_RE + '\\(', end: '\\)',
                                contains: [
                                    hljs.NUMBER_MODE,
                                    hljs.QUOTE_STRING_MODE,
                                    hljs.APOS_STRING_MODE
                                ]
                            }
                        ]
                    }
                 ]
             };
         });
         
         console.log('自定义语言注册成功');
     } catch (error) {
         console.warn('自定义语言注册失败，使用highlight.js内置支持:', error);
     }
 }

        // 开始注册语言
        registerHighlightLanguages();
    </script>
    <style>
        /* 全局样式重置 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        /* body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            line-height: 1.6;
            color: #334155;
            overflow: hidden;
        } */
        
        /* 背景网格层 */
        article {
            position: relative;
            width: 100%;
            height: 100vh;
            overflow: hidden;
            background-color: #f8fafc;
        }
        
        article::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: linear-gradient(to right, rgba(59, 130, 246, 0.05) 1px, transparent 1px),
                              linear-gradient(to bottom, rgba(59, 130, 246, 0.05) 1px, transparent 1px);
            background-size: 20px 20px;
            pointer-events: none;
        }
        
        /* 主要内容层 */
        section {
            position: relative;
            width: 100%;
            min-height: 600px;
            display: flex;
            flex-direction: column;
        }
        
        /* 主内容区 */
        .app-container {
            flex: 1;
            display: flex;
            flex-direction: row;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        
        /* 三列布局 */
        .chat-main-area {
            display: flex;
            flex: 1;
            width: 100%;
            height: 100%;
        }
        
        .left-column, .right-column {
            flex: 1;
            min-width: 0;
            background: rgba(255, 255, 255, 0.9);
        }
        
        .chat-main-area {
            display: flex;
            flex: 1;
            height: 100%;
            position: relative;
        }
        
        .middle-column {
            flex: 1;
            min-width: 200px; /* 降低最小宽度，让Container Queries处理响应式 */
            max-width: 100%;
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(200px, 1200px) minmax(0, 1fr);
            height: 100%;
            background: rgba(255, 255, 255, 0.95);
            transition: all 0.3s ease;
            container-type: inline-size;
            container-name: middle-column;
        }
        
        /* 三列布局子元素样式 */
        .middle-column-left,
        .middle-column-right {
            background: transparent;
            transition: all 0.3s ease;
        }
        
        .middle-column-center {
            display: flex;
            flex-direction: column;
            height: 100%;
            background: rgba(255, 255, 255, 0.95);
            overflow: hidden; /* 确保内部滚动正常工作 */
        }
        
        /* 修复chat-window滚动条 */
        .middle-column-center .chat-window {
            flex: 1;
            overflow-y: auto;
            padding: 2rem;
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
            height: calc(100% - 120px); /* 减去输入区域高度 */
        }
        
        /* 修复输入区域样式 */
        .middle-column-center .input-area {
            flex-shrink: 0;
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(20px);
            border-top: 1px solid rgba(59, 130, 246, 0.2);
            padding: 1.5rem 2rem;
            box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.04);
        }
        
        /* Container Queries 响应式布局 */
        @container middle-column (max-width: 1600px) {
            .middle-column {
                grid-template-columns: minmax(0, 80px) minmax(400px, 1fr) minmax(0, 80px);
            }
        }
        
        @container middle-column (max-width: 1200px) {
            .middle-column {
                grid-template-columns: minmax(0, 40px) minmax(400px, 1fr) minmax(0, 40px);
            }
        }
        
        @container middle-column (max-width: 800px) {
            .middle-column {
                grid-template-columns: 0 minmax(320px, 1fr) 0;
            }
            
            .middle-column-left,
            .middle-column-right {
                display: none;
            }
        }
        
        @container middle-column (max-width: 600px) {
            .middle-column {
                grid-template-columns: 0 minmax(280px, 1fr) 0;
            }
        }
        
        @container middle-column (max-width: 480px) {
            .middle-column {
                grid-template-columns: 0 minmax(240px, 1fr) 0;
            }
        }
        
        /* 防止极端小尺寸导致白屏 */
        @container middle-column (max-width: 400px) {
            .middle-column {
                grid-template-columns: 0 minmax(200px, 1fr) 0;
            }
            
            .middle-column-center .chat-window {
                padding: 1rem;
                gap: 1rem;
            }
            
            .middle-column-center .input-area {
                padding: 1rem;
            }
        }
        
        @container middle-column (max-width: 320px) {
            .middle-column {
                grid-template-columns: 0 minmax(180px, 1fr) 0;
            }
            
            .middle-column-center .chat-window {
                padding: 0.5rem;
                gap: 0.5rem;
            }
            
            .middle-column-center .input-area {
                padding: 0.5rem;
            }
        }
        
        /* 绝对最小尺寸保护 */
        @container middle-column (max-width: 280px) {
            .middle-column {
                grid-template-columns: 0 minmax(200px, 1fr) 0 !important;
                min-width: 200px !important;
            }
        }
        
        .preview-column {
            width: 400px;
            min-width: 300px;
            max-width: 50%;
            display: flex;
            flex-direction: column;
            height: 100%;
            background: rgba(255, 255, 255, 0.95);
            border-left: 1px solid rgba(59, 130, 246, 0.1);
            transition: all 0.3s ease;
        }
        
        .preview-column.hidden {
            display: none;
        }
        
        .resize-handle {
            width: 8px;
            background: rgba(59, 130, 246, 0.1);
            cursor: col-resize;
            transition: background-color 0.2s ease;
            flex-shrink: 0;
        }
        
        .resize-handle:hover {
            background: rgba(59, 130, 246, 0.3);
        }
        
        .resize-handle.resizing {
            background: rgba(59, 130, 246, 0.5);
        }
        
        .preview-header {
            padding: 1rem 1.5rem;
            border-bottom: 1px solid rgba(59, 130, 246, 0.1);
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: rgba(248, 250, 252, 0.8);
        }
        
        .preview-header h3 {
            margin: 0;
            font-size: 1rem;
            font-weight: 600;
            color: #334155;
        }
        
        .close-button {
            background: none;
            border: none;
            font-size: 1.5rem;
            color: #64748b;
            cursor: pointer;
            padding: 0.25rem;
            border-radius: 4px;
            transition: all 0.2s ease;
            line-height: 1;
        }
        
        .close-button:hover {
            background: rgba(239, 68, 68, 0.1);
            color: #ef4444;
        }
        
        .preview-body {
            flex: 1;
            padding: 1rem;
            overflow: auto;
        }
        
        .chat-window {
            flex: 1;
            overflow-y: auto;
            padding: 2rem;
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
        }
        
        /* 侧边栏 */
        .sidebar {
            width: 280px;
            flex-shrink: 0;
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(20px);
            border-right: 1px solid rgba(59, 130, 246, 0.1);
            display: flex;
            flex-direction: column;
            overflow: hidden;
            transition: all 0.3s ease;
        }
        
        /* 侧边栏折叠状态 */
        .sidebar.collapsed {
            width: 0;
            min-width: 0;
            opacity: 0;
            pointer-events: none;
        }
        
        .sidebar.collapsed .toggle-sidebar-button {
            display: none;
        }
        
        /* 主聊天区域侧边栏折叠状态 */
        .chat-main-area.sidebar-collapsed {
            margin-left: 0;
        }
        
        /* 展开按钮样式 */
        .expand-sidebar-button {
            position: fixed;
            top: 1rem;
            left: 1rem;
            z-index: 1000;
            background: rgba(59, 130, 246, 0.9);
            color: white;
            border: none;
            border-radius: 8px;
            padding: 0.75rem;
            cursor: pointer;
            box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
            transition: all 0.3s ease;
            display: none;
        }
        
        .expand-sidebar-button:hover {
            background: rgba(59, 130, 246, 1);
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4);
        }
        
        .expand-sidebar-button.visible {
            display: block;
        }
        
        /* 侧边栏三层结构 */
        .sidebar-top-section {
            flex-shrink: 0;
            border-bottom: 1px solid rgba(59, 130, 246, 0.1);
        }
        
        .sidebar-middle-section {
            flex: 1;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }
        
        .sidebar-bottom-section {
            flex-shrink: 0;
            border-top: 1px solid rgba(59, 130, 246, 0.1);
            background: rgba(248, 250, 252, 0.8);
        }
        
        .sidebar-header {
            padding: 1.5rem;
        }
        
        .sidebar-title-container {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 1rem;
        }
        
        .sidebar-title {
            font-size: 1.125rem;
            font-weight: 600;
            color: #334155;
            margin: 0;
        }
        
        .toggle-sidebar-button {
            background: none;
            border: none;
            padding: 0.5rem;
            border-radius: 6px;
            cursor: pointer;
            color: #64748b;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .toggle-sidebar-button:hover {
            background: rgba(59, 130, 246, 0.1);
            color: #3b82f6;
        }
        
        .chat-list-container {
            flex: 1;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }
        
        .chat-list-title {
            padding: 1rem 1.5rem 0.5rem;
            font-size: 0.875rem;
            font-weight: 600;
            color: #64748b;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }
        
        .new-chat-button {
            width: 100%;
            padding: 0.75rem 1rem;
            background: rgba(59, 130, 246, 0.1);
            color: #3b82f6;
            border: none;
            border-radius: 8px;
            font-size: 0.875rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
        }
        
        .new-chat-button:hover {
            background: rgba(59, 130, 246, 0.2);
        }
        
        .chat-list {
            flex: 1;
            overflow-y: auto;
            padding: 0 1rem 1rem;
        }
        
        /* 人员配置信息样式 */
        .user-info-container {
            padding: 1rem;
        }
        
        .user-info-title {
            font-size: 0.875rem;
            font-weight: 600;
            color: #64748b;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            margin-bottom: 1rem;
        }
        
        .user-info-content {
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }
        
        .user-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: rgba(59, 130, 246, 0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #3b82f6;
            flex-shrink: 0;
        }
        
        .user-details {
            flex: 1;
            min-width: 0;
        }
        
        .user-name {
            font-size: 0.875rem;
            font-weight: 600;
            color: #334155;
            margin-bottom: 0.25rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        
        .user-role {
            font-size: 0.75rem;
            color: #94a3b8;
            font-weight: 500;
        }
        
        .chat-item {
            padding: 1rem;
            border-radius: 8px;
            cursor: pointer;
            margin-bottom: 0.5rem;
            transition: all 0.2s ease;
            position: relative;
        }
        
        .chat-item:hover {
            background: rgba(59, 130, 246, 0.05);
        }
        
        .chat-item.active {
            background: rgba(59, 130, 246, 0.15);
            border-left: 3px solid #3b82f6;
        }
        
        .chat-item-title {
            font-size: 0.875rem;
            font-weight: 500;
            color: #334155;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            margin-bottom: 0.25rem;
        }
        
        .chat-item-time {
            font-size: 0.75rem;
            color: #94a3b8;
        }
        
        .chat-item-delete {
            position: absolute;
            top: 0.5rem;
            right: 0.5rem;
            padding: 0.25rem;
            background: rgba(239, 68, 68, 0.1);
            color: #ef4444;
            border: none;
            border-radius: 50%;
            cursor: pointer;
            opacity: 0;
            transition: all 0.2s ease;
        }
        
        .chat-item:hover .chat-item-delete {
            opacity: 1;
        }
        
        .chat-item-delete:hover {
            background: rgba(239, 68, 68, 0.2);
        }
        
        /* 主聊天区域 */
        main {
            flex: 1;
            display: flex;
            width: 100%;
            height: 100%;
        }
        
        /* 对话历史区域 */
        .chat-history {
            flex: 1;
            overflow-y: auto;
            padding: 2rem;
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
        }
        
        /* 微信风格消息布局 */
        .message {
            display: flex;
            margin-bottom: 1.5rem;
            animation: fadeIn 0.3s ease-in;
            gap: 0.75rem;
        }
        
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .message.user {
            flex-direction: row-reverse;
        }
        
        .message.ai {
            flex-direction: row;
        }
        
        /* 头像样式 */
        .message-icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
            font-size: 0.9rem;
        }
        
        .message.user .message-icon {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
        }
        
        .message.ai .message-icon {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
            color: white;
        }
        
        .message-content {
            max-width: 65%;
            padding: 0.75rem 1rem;
            border-radius: 18px;
            position: relative;
            word-wrap: break-word;
            line-height: 1.5;
            transition: all 0.3s ease;
            flex-grow: 1;
        }
        
        .message.ai .message-content {
            max-width: 100%;
        }
        
        .message.user .message-content {
            background: linear-gradient(135deg, rgba(248, 250, 252, 0.95) 0%, rgba(241, 245, 249, 0.95) 100%);
            color: #334155;
            border: 1px solid rgba(226, 232, 240, 0.8);
            border-bottom-right-radius: 4px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
            backdrop-filter: blur(10px);
        }
        
        .message.ai .message-content {
            background: rgba(255, 255, 255, 0.95);
            border: 1px solid rgba(226, 232, 240, 0.8);
            border-bottom-left-radius: 4px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        }
        
        .message-content:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.04);
        }
        
        /* 输入区域 */
        .input-area {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(20px);
            border-top: 1px solid rgba(59, 130, 246, 0.2);
            padding: 1.5rem 2rem;
            box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.04);
        }
        
        .input-container {
            position: relative;
            max-width: 800px;
            margin: 0 auto;
        }
        
        textarea {
            width: 100%;
            min-height: 80px;
            padding: 1rem 5rem 1rem 1rem;
            border: 2px solid transparent;
            border-radius: 12px;
            background: rgba(255, 255, 255, 0.85);
            font-size: 1rem;
            resize: none;
            transition: all 0.3s ease;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
        }
        
        textarea:focus {
            outline: none;
            border-color: rgba(59, 130, 246, 0.3);
            background-color: white;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1), 0 2px 12px rgba(0, 0, 0, 0.06);
            transform: translateY(-1px);
        }
        
        textarea::placeholder {
            color: #94a3b8;
            font-style: italic;
        }
        
        .send-button {
            position: absolute;
            bottom: 0.75rem;
            right: 0.75rem;
            padding: 0.5rem 1.5rem;
            background-color: #3b82f6;
            color: white;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-size: 0.875rem;
            font-weight: 500;
            transition: all 0.3s ease;
            box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2);
        }
        
        .send-button:hover:not(:disabled) {
            background-color: #2563eb;
            transform: translateY(-2px);
            box-shadow: 0 4px 16px rgba(59, 130, 246, 0.4);
        }
        
        .send-button:active:not(:disabled) {
            transform: translateY(0);
            box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
        }
        
        .send-button:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }
        
        /* Markdown样式 */
        .markdown-content {
            line-height: 1.7;
        }
        
        .markdown-content h1,
        .markdown-content h2,
        .markdown-content h3 {
            margin: 1.5rem 0 1rem 0;
            color: #334155;
        }
        
        .markdown-content p {
            margin-bottom: 1rem;
            text-align: justify;
        }
        
        .markdown-content ul,
        .markdown-content ol {
            margin: 1rem 0;
            padding-left: 2rem;
        }
        
        .markdown-content li {
            margin-bottom: 0.5rem;
        }
        
        .markdown-content pre {
            margin: 1rem 0;
            padding: 1rem;
            background-color: #1e293b;
            border-radius: 8px;
            overflow-x: auto;
            position: relative;
        }
        
        .markdown-content code {
            font-family: 'Fira Code', 'Monaco', 'Consolas', monospace;
            background-color: rgba(59, 130, 246, 0.1);
            padding: 0.2rem 0.4rem;
            border-radius: 4px;
            font-size: 0.875rem;
            color: #3b82f6;
        }
        
        .markdown-content pre {
            position: relative;
            margin: 1rem 0;
            border-radius: 8px;
            overflow: hidden;
            background-color: #1e293b;
            border: 1px solid rgba(59, 130, 246, 0.2);
        }
        
        .markdown-content pre code {
            background-color: transparent;
            color: #e2e8f0;
            padding: 1rem;
            display: block;
            overflow-x: auto;
            font-size: 0.875rem;
            line-height: 1.5;
            white-space: pre;
        }
        
        /* 代码块语言标签 */
        .code-block-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.5rem 1rem;
            background-color: rgba(59, 130, 246, 0.1);
            border-bottom: 1px solid rgba(59, 130, 246, 0.2);
            font-size: 0.75rem;
            color: #64748b;
        }
        
        .code-language {
            font-weight: 600;
            color: #3b82f6;
        }
        
        /* 代码块按钮区域样式 */
        .code-block-buttons {
            position: absolute;
            top: 0.5rem;
            right: 0.5rem;
            display: flex;
            gap: 0.5rem;
            z-index: 10;
        }
        
        .code-block-buttons button {
            padding: 0.375rem 0.75rem;
            border: 1px solid rgba(59, 130, 246, 0.3);
            border-radius: 6px;
            background: rgba(255, 255, 255, 0.9);
            color: #334155;
            font-size: 0.75rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s ease;
            backdrop-filter: blur(10px);
        }
        
        .code-block-buttons button:hover {
            background: rgba(59, 130, 246, 0.1);
            border-color: rgba(59, 130, 246, 0.6);
            transform: translateY(-1px);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }
        
        .code-block-buttons button:active {
            transform: translateY(0);
        }
        
        .preview-button {
            background: rgba(59, 130, 246, 0.9) !important;
            color: white !important;
            border-color: rgba(59, 130, 246, 0.9) !important;
        }
        
        .download-button {
            background: rgba(255, 255, 255, 0.9);
            color: #334155;
        }
        
        /* 预览模态框 - 侧边栏样式 */
        .preview-modal {
            display: none;
            position: fixed;
            top: 0;
            right: 0;
            width: 80%;
            max-width: 1000px;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 1000;
            align-items: flex-end;
            justify-content: flex-end;
        }
        
        .preview-modal.open {
            display: flex;
        }
        
        .preview-content {
            background: white;
            border-radius: 12px 0 0 12px;
            width: 100%;
            height: 100%;
            max-height: 100vh;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            box-shadow: -20px 0 40px rgba(0, 0, 0, 0.1);
            transform: translateX(100%);
            transition: transform 0.3s ease;
        }
        
        .preview-modal.open .preview-content {
            transform: translateX(0);
        }
        
        .preview-header {
            padding: 1.5rem 2rem;
            background: #f8fafc;
            border-bottom: 1px solid #e2e8f0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            backdrop-filter: blur(20px);
        }
        
        .preview-header h3 {
            margin: 0;
            font-size: 1.25rem;
            color: #334155;
            font-weight: 600;
        }
        
        .close-button {
            background: rgba(59, 130, 246, 0.1);
            border: none;
            border-radius: 8px;
            padding: 0.5rem;
            font-size: 1.25rem;
            cursor: pointer;
            color: #64748b;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
        }
        
        .close-button:hover {
            background: rgba(59, 130, 246, 0.2);
            color: #334155;
        }
        
        .preview-body {
            flex: 1;
            overflow-y: auto;
            padding: 0;
            background: #f8fafc;
        }
        
        /* HTML预览iframe */
        .preview-iframe {
            width: 100%;
            height: 100%;
            border: none;
            background: white;
        }
        
        /* 代码预览样式 */
        .code-preview {
            padding: 2rem;
            background: #1e293b;
            color: #e2e8f0;
            font-family: 'Fira Code', 'Monaco', 'Consolas', monospace;
            font-size: 0.875rem;
            line-height: 1.5;
            white-space: pre;
            overflow-x: auto;
        }
        
        /* 加载动画 */
        .loading {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .loading::after {
            content: '';
            width: 16px;
            height: 16px;
            border: 2px solid rgba(59, 130, 246, 0.3);
            border-top: 2px solid #3b82f6;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        /* 响应式设计 - 更新为与Container Queries兼容 */
        @media (max-width: 1400px) {
            /* 保持侧边栏样式，middle-column由Container Queries处理 */
        }
        
        @media (max-width: 1200px) {
            /* 保持侧边栏样式，middle-column由Container Queries处理 */
        }
        
        @media (max-width: 1024px) {
            .sidebar {
                width: 240px;
            }
            
            /* middle-column由Container Queries处理 */
        }
        
        @media (max-width: 768px) {
            .app-container {
                flex-direction: column;
            }
            
            .sidebar {
                width: 100%;
                height: 180px;
                border-right: none;
                border-bottom: 1px solid rgba(59, 130, 246, 0.4);
                overflow-y: auto;
            }
            
            .chat-main-area {
                flex-direction: column;
            }
            
            .middle-column {
                width: 100%;
                max-width: 100%;
                border-left: none;
                border-right: none;
                min-width: auto;
                /* 在小屏设备上强制单列布局 */
                grid-template-columns: 0 minmax(280px, 1fr) 0 !important;
            }
            
            .middle-column-left,
            .middle-column-right {
                display: none !important;
            }
            
            .resize-handle {
                display: none;
            }
            
            .preview-column {
                position: fixed;
                top: 0;
                right: 0;
                bottom: 0;
                width: 100%;
                max-width: 100%;
                z-index: 1000;
                background: white;
                border-left: none;
            }
            
            .message.ai .message-content {
                max-width: 100%;
            }
            
            .chat-window {
                padding: 1rem;
                max-height: calc(100vh - 320px);
            }
            
            .input-area {
                padding: 1rem;
            }
            
            header h1 {
                font-size: 1.5rem;
            }
        }
        
        @media (max-width: 480px) {
            .sidebar {
                height: 150px;
            }
            
            .preview-column {
                width: 100%;
                max-width: 100%;
            }
            
            .input-area {
                padding: 0.75rem;
            }
            
            #messageInput {
                font-size: 0.9rem;
            }
            
            .send-button {
                width: 40px !important;
                height: 40px !important;
            }
            
            .message-avatar {
                width: 32px;
                height: 32px;
                font-size: 0.8rem;
            }
            
            .message.ai .message-content {
                max-width: 100%;
                padding: 0.5rem 0.75rem;
            }
        }
    </style>
</head>
<body>
    <!-- 背景网格层 -->
    <article class="background-grid">
        
        <!-- 主要内容层 -->
        <section class="main-section">
            <!-- 主内容区 -->
            <div class="app-container">
                <!-- 左侧历史对话栏 -->
                <aside class="sidebar">
                    <!-- 顶部：AI问答助手区域 -->
                    <div class="sidebar-top-section">
                        <div class="sidebar-header">
                            <div class="sidebar-title-container">
                                <h2 class="sidebar-title">AI问答助手</h2>
                                <button id="toggleSidebar" class="toggle-sidebar-button">
                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M15 18L9 12L15 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                    </svg>
                                </button>
                            </div>
                            <button id="newChatButton" class="new-chat-button">
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M12 5V19M5 12H19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                </svg>
                                新建对话
                            </button>
                        </div>
                    </div>
                    
                    <!-- 中间：历史会话列表 -->
                    <div class="sidebar-middle-section">
                        <div class="chat-list-container">
                            <div class="chat-list-title">历史会话</div>
                            <div class="chat-list" id="chatList">
                                <!-- 对话列表将通过JS动态生成 -->
                            </div>
                        </div>
                    </div>
                    
                    <!-- 底部：人员配置信息 -->
                    <div class="sidebar-bottom-section">
                        <div class="user-info-container">
                            <div class="user-info-content">
                                <div class="user-avatar">
                                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M12 12C14.2091 12 16 10.2091 16 8C16 5.79086 14.2091 4 12 4C9.79086 4 8 5.79086 8 8C8 10.2091 9.79086 12 12 12Z" fill="currentColor"/>
                                        <path d="M12 14C9.33 14 4 15.34 4 18V20H20V18C20 15.34 14.67 14 12 14Z" fill="currentColor"/>
                                    </svg>
                                </div>
                                <div class="user-details">
                                    <div class="user-name">当前用户</div>
                                    <div class="user-role">管理员</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </aside>
                
                <!-- 主对话区域 - 三纵列布局 -->
                <main class="chat-main-area">
                    <!-- 第二列：中间对话区域 - Container Queries + Grid三列布局 -->
                    <div class="middle-column">
                        <!-- 第一列：左侧留白区域 -->
                        <div class="middle-column-left"></div>
                        
                        <!-- 第二列：主对话区域 -->
                        <div class="middle-column-center">
                            <!-- 对话窗口 -->
                            <div class="chat-window" id="chatHistory">
                                <!-- 对话内容将通过JS动态生成 -->
                            </div>
                            
                            <!-- 输入区域 (固定在中间列底部) -->
                            <div class="input-area">
                                <div class="input-container">
                                    <textarea id="messageInput" placeholder="输入你的问题..." rows="1" spellcheck="false"></textarea>
                                    <button id="sendButton" class="send-button">发送</button>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 第三列：右侧留白区域 -->
                        <div class="middle-column-right"></div>
                    </div>
                    
                    <!-- 间隔栏 -->
                    <div class="resize-handle" id="resizeHandle"></div>
                    
                    <!-- 第三列：右侧预览窗口 -->
                    <div class="preview-column" id="previewColumn">
                        <div class="preview-header">
                            <h3>HTML预览</h3>
                            <button id="closePreview" class="close-button">&times;</button>
                        </div>
                        <div class="preview-body" id="previewBody">
                            <!-- iframe预览区域 -->
                        </div>
                    </div>
                </main>
            </div>
        </section>
    </article>
    
    <!-- 展开侧边栏按钮 -->
    <button id="expandSidebar" class="expand-sidebar-button">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M9 18L15 12L9 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
    </button>
    
    <script>
        // 全局变量
        var currentChatId = null;
        var chatHistoryData = {};
        var chatHistory = null;
        var messageInput = null;
        var sendButton = null;
        var previewModal = null;
        var closePreview = null;
        var previewBody = null;
        var mainContent = null;
        var chatList = null;
        var newChatButton = null;
        var previewColumn = null;
        var resizeHandle = null;
        
        // 初始化脚本
        function initApp() {
            console.log('AI问答页面初始化');
            
            // 获取DOM元素
            chatHistory = document.getElementById('chatHistory');
            messageInput = document.getElementById('messageInput');
            sendButton = document.getElementById('sendButton');
            previewColumn = document.getElementById('previewColumn');
            closePreview = document.getElementById('closePreview');
            previewBody = document.getElementById('previewBody');
            resizeHandle = document.getElementById('resizeHandle');
            mainContent = document.querySelector('main');
            chatList = document.getElementById('chatList');
            newChatButton = document.getElementById('newChatButton');
            
            // 初始化第三方库
            initLibraries();
            
            // 初始化侧边栏
            initSidebar();
            
            // 加载聊天历史
            loadChatHistory();
            
            // 计算动态高度
            calculateDynamicHeight();
            
            // 添加事件监听
            sendButton.addEventListener('click', handleSendMessage);
            messageInput.addEventListener('keydown', function(event) {
                if (event.key === 'Enter' && event.shiftKey === false) {
                    event.preventDefault();
                    handleSendMessage();
                }
            });
            
            closePreview.addEventListener('click', function() {
                previewColumn.style.display = 'none';
                resizeHandle.style.display = 'none';
            });
            
            // 默认隐藏预览列
            previewColumn.style.display = 'none';
            resizeHandle.style.display = 'none';
            
            // 监听输入框变化，启用/禁用发送按钮
            messageInput.addEventListener('input', function() {
                sendButton.disabled = messageInput.value.trim() === '';
            });
            
            // 动态调整文本框高度
            messageInput.addEventListener('input', adjustTextareaHeight);
            
            // 初始化间隔栏拖动功能
            initResizeHandle();
            
            // 间隔栏拖动功能（优化版）
            function initResizeHandle() {
                var isResizing = false;
                var startX = 0;
                var startWidth = 0;
                var rafId = null;
                
                // 使用requestAnimationFrame优化性能
                function updateWidth(width) {
                    if (rafId) {
                        cancelAnimationFrame(rafId);
                    }
                    rafId = requestAnimationFrame(function() {
                        previewColumn.style.width = width + 'px';
                    });
                }
                
                // 优化性能的节流函数
                function throttle(func, delay) {
                    var timeoutId = null;
                    var lastExecTime = 0;
                    
                    return function() {
                        var context = this;
                        var args = arguments;
                        var currentTime = Date.now();
                        
                        if (currentTime - lastExecTime > delay) {
                            func.apply(context, args);
                            lastExecTime = currentTime;
                        } else {
                            if (timeoutId) {
                                clearTimeout(timeoutId);
                            }
                            timeoutId = setTimeout(function() {
                                func.apply(context, args);
                                lastExecTime = Date.now();
                            }, delay - (currentTime - lastExecTime));
                        }
                    };
                }
                
                // 鼠标拖动处理
                function handleMouseDown(e) {
                    isResizing = true;
                    startX = e.clientX;
                    startWidth = parseInt(document.defaultView.getComputedStyle(previewColumn).width, 10);
                    document.body.style.cursor = 'col-resize';
                    document.body.style.userSelect = 'none';
                    
                    // 添加resizing类用于视觉反馈
                    resizeHandle.classList.add('resizing');
                    
                    e.preventDefault();
                }
                
                // 鼠标移动处理（使用节流优化）
                var handleMouseMove = throttle(function(e) {
                    if (!isResizing) return;
                    
                    var width = startWidth - (e.clientX - startX);
                    var minWidth = 300;
                    var maxWidth = window.innerWidth * 0.5;
                    
                    // 限制宽度范围
                    width = Math.max(minWidth, Math.min(maxWidth, width));
                    
                    updateWidth(width);
                    
                    e.preventDefault();
                }, 16); // 60fps
                
                // 鼠标释放处理
                function handleMouseUp() {
                    if (!isResizing) return;
                    
                    isResizing = false;
                    document.body.style.cursor = '';
                    document.body.style.userSelect = '';
                    resizeHandle.classList.remove('resizing');
                    
                    if (rafId) {
                        cancelAnimationFrame(rafId);
                        rafId = null;
                    }
                }
                
                // 绑定事件监听器
                resizeHandle.addEventListener('mousedown', handleMouseDown);
                document.addEventListener('mousemove', handleMouseMove);
                document.addEventListener('mouseup', handleMouseUp);
                
                // 触摸设备支持
                function handleTouchStart(e) {
                    isResizing = true;
                    startX = e.touches[0].clientX;
                    startWidth = parseInt(document.defaultView.getComputedStyle(previewColumn).width, 10);
                    document.body.style.userSelect = 'none';
                    resizeHandle.classList.add('resizing');
                    
                    e.preventDefault();
                }
                
                // 触摸移动处理（使用节流优化）
                var handleTouchMove = throttle(function(e) {
                    if (!isResizing) return;
                    
                    var width = startWidth - (e.touches[0].clientX - startX);
                    var minWidth = 300;
                    var maxWidth = window.innerWidth * 0.5;
                    
                    // 限制宽度范围
                    width = Math.max(minWidth, Math.min(maxWidth, width));
                    
                    updateWidth(width);
                    
                    e.preventDefault();
                }, 16); // 60fps
                
                // 触摸结束处理
                function handleTouchEnd() {
                    if (!isResizing) return;
                    
                    isResizing = false;
                    document.body.style.userSelect = '';
                    resizeHandle.classList.remove('resizing');
                    
                    if (rafId) {
                        cancelAnimationFrame(rafId);
                        rafId = null;
                    }
                }
                
                // 绑定触摸事件监听器
                resizeHandle.addEventListener('touchstart', handleTouchStart);
                document.addEventListener('touchmove', handleTouchMove);
                document.addEventListener('touchend', handleTouchEnd);
            }
            
            // 计算动态高度
            function calculateDynamicHeight() {
                try {
                    // 获取浏览器可视高度
                    var viewportHeight = window.innerHeight;
                    
                    // 确保高度为正数
                    var availableHeight = Math.max(400, viewportHeight);
                    
                    // 设置section区域的高度
                    var section = document.querySelector('section');
                    if (section) {
                        section.style.height = availableHeight + 'px';
                    }
                    
                    // 设置app-container的高度
                    var appContainer = document.querySelector('.app-container');
                    if (appContainer) {
                        appContainer.style.height = availableHeight + 'px';
                    }
                    
                    // 设置侧边栏的高度
                    var sidebar = document.querySelector('.sidebar');
                    if (sidebar) {
                        sidebar.style.height = availableHeight + 'px';
                    }
                    
                    // 设置主聊天区域的高度
                    var chatMainArea = document.querySelector('.chat-main-area');
                    if (chatMainArea) {
                        chatMainArea.style.height = availableHeight + 'px';
                    }
                    
                    // 聊天窗口的高度由flex布局自动分配，不需要手动设置
                } catch (error) {
                    console.error('计算动态高度失败:', error);
                    // 降级方案：使用固定最小高度
                    var section = document.querySelector('section');
                    if (section) {
                        section.style.minHeight = '600px';
                    }
                    var appContainer = document.querySelector('.app-container');
                    if (appContainer) {
                        appContainer.style.minHeight = '600px';
                    }
                    var sidebar = document.querySelector('.sidebar');
                    if (sidebar) {
                        sidebar.style.minHeight = '600px';
                    }
                    var chatMainArea = document.querySelector('.chat-main-area');
                    if (chatMainArea) {
                        chatMainArea.style.minHeight = '600px';
                    }
                }
            }
            
            // 初始化时计算高度
            calculateDynamicHeight();
            window.addEventListener('resize', calculateDynamicHeight);
            
            // 如果没有对话，创建一个新对话
            if (Object.keys(chatHistoryData).length === 0) {
                createNewChat();
            }
            
            // 初始化第三方库
            function initLibraries() {
                // 配置marked
                if (typeof marked !== 'undefined') {
                    marked.setOptions({
                        breaks: true,
                        gfm: true,
                        headerIds: false,
                        mangle: false
                    });
                }
            }
            
            // 调整文本框高度
            function adjustTextareaHeight() {
                messageInput.style.height = 'auto';
                messageInput.style.height = Math.min(messageInput.scrollHeight, 200) + 'px';
            }
            
            // 处理发送消息
            function handleSendMessage() {
                var message = messageInput.value.trim();
                if (message === '' || !currentChatId) return;
                
                // 禁用发送按钮
                sendButton.disabled = true;
                
                // 创建用户消息对象
                var userMessage = {
                    role: 'user',
                    content: message,
                    timestamp: Date.now()
                };
                
                // 添加到历史记录
                chatHistoryData[currentChatId].messages.push(userMessage);
                
                // 更新对话标题（如果是第一条消息）
                if (chatHistoryData[currentChatId].title === '新对话') {
                    chatHistoryData[currentChatId].title = message.length > 30 ? message.substring(0, 30) + '...' : message;
                    renderChatList();
                }
                
                // 更新对话时间
                var now = new Date();
                chatHistoryData[currentChatId].time = now.getHours() + ':' + (now.getMinutes() < 10 ? '0' : '') + now.getMinutes();
                
                // 保存历史记录
                saveChatHistory();
                
                // 添加到UI
                addMessageToUI(userMessage);
                
                // 清空输入框
                messageInput.value = '';
                messageInput.style.height = 'auto';
                
                // 显示AI正在输入
                var loadingMessage = addLoadingMessage();
                
                // 模拟AI回复延迟
                setTimeout(function() {
                    // 移除加载消息
                    loadingMessage.remove();
                    
                    // 生成模拟回复
                    var aiResponse = generateSimulatedResponse(message);
                    
                    // 创建AI消息对象
                    var aiMessage = {
                        role: 'ai',
                        content: aiResponse,
                        timestamp: Date.now()
                    };
                    
                    // 添加到历史记录
                    chatHistoryData[currentChatId].messages.push(aiMessage);
                    saveChatHistory();
                    
                    // 流式显示AI回复
                    streamAIResponse(aiResponse);
                    
                    // 重新启用发送按钮
                    sendButton.disabled = false;
                }, 1500);
            }
            
            // 添加用户消息
            function addUserMessage(content) {
                // 兼容旧调用，但优先使用新的消息管理方式
                var userMessage = {
                    role: 'user',
                    content: content,
                    timestamp: Date.now()
                };
                addMessageToUI(userMessage);
                saveMessage('user', content);
            }
            
            // 添加AI消息
            function addAIMessage(content) {
                // 兼容旧调用，但优先使用新的消息管理方式
                var aiMessage = {
                    role: 'ai',
                    content: content,
                    timestamp: Date.now()
                };
                addMessageToUI(aiMessage);
                saveMessage('ai', content);
                // 添加预览按钮
                addPreviewButtons();
            }
            
            // 添加加载消息
            function addLoadingMessage() {
                var messageDiv = document.createElement('div');
                messageDiv.className = 'message ai';
                messageDiv.innerHTML = `
                    <div class="message-icon">AI</div>
                    <div class="message-content">
                        <div class="loading">正在思考</div>
                    </div>
                `;
                chatHistory.appendChild(messageDiv);
                scrollToBottom();
                return messageDiv;
            }
            
            // 创建消息元素（微信风格）
            function createMessageElement(sender, content, isMarkdown) {
                var messageDiv = document.createElement('div');
                messageDiv.className = 'message ' + sender;
                
                var iconText = sender === 'user' ? '我' : 'AI';
                
                var messageContent;
                if (isMarkdown && typeof marked !== 'undefined') {
                    messageContent = `<div class="markdown-content">${marked.parse(content)}</div>`;
                } else {
                    messageContent = `<div>${escapeHtml(content)}</div>`;
                }
                
                messageDiv.innerHTML = `
                    <div class="message-icon">${iconText}</div>
                    <div class="message-content">
                        ${messageContent}
                    </div>
                `;
                
                // 应用代码高亮
                setTimeout(function() {
                    applyCodeHighlighting(messageDiv);
                }, 100);
                
                return messageDiv;
            }
            
            // 流式显示AI回复
            function streamAIResponse(response) {
                var messageDiv = document.createElement('div');
                messageDiv.className = 'message ai';
                messageDiv.innerHTML = `
                    <div class="message-icon">AI</div>
                    <div class="message-content">
                        <div class="markdown-content" id="streamContent"></div>
                    </div>
                `;
                chatHistory.appendChild(messageDiv);
                
                var contentElement = messageDiv.querySelector('#streamContent');
                var index = 0;
                var chunkSize = 50;
                var fullHtml = '';
                
                function streamNextChunk() {
                    if (index >= response.length) {
                        // 完成流式输出，应用代码高亮并保存
                        applyCodeHighlighting(messageDiv);
                        // 保存到旧的存储方式以保持兼容性
                        saveMessage('ai', response);
                        addPreviewButtons();
                        return;
                    }
                    
                    var chunk = response.substring(index, index + chunkSize);
                    index += chunkSize;
                    
                    // 为了更好的显示效果，我们先缓存完整的响应，然后每次渲染全部内容
                    fullHtml += chunk;
                    
                    if (typeof marked !== 'undefined') {
                        contentElement.innerHTML = marked.parse(fullHtml);
                    } else {
                        contentElement.textContent = fullHtml;
                    }
                    
                    scrollToBottom();
                    
                    // 继续流式输出，随机延迟增加真实感
                    setTimeout(streamNextChunk, Math.random() * 30 + 20);
                }
                
                // 开始流式输出
                streamNextChunk();
            }
            
            // 为HTML代码块添加预览按钮（兼容旧版本）
            function addPreviewButtons() {
                // 等待一小段时间确保DOM渲染完成
                setTimeout(function() {
                    // 查找所有代码块，包括高亮后的
                    var allCodeBlocks = document.querySelectorAll('.markdown-content pre code');
                    
                    allCodeBlocks.forEach(function(block) {
                        var pre = block.parentNode;
                        // 检查是否已经有按钮区域
                        if (!pre.querySelector('.code-block-buttons')) {
                            // 检查是否是HTML代码块
                            var codeText = block.textContent.trim();
                            var language = block.className.replace('language-', '');
                            
                            // 如果没有语言类，尝试推断
                            if (!language) {
                                language = detectLanguageFromContent(codeText);
                            }
                            
                            // 根据语言类型添加功能按钮
                            addCodeBlockButtons(pre, language, codeText);
                        }
                    });
                }, 100); // 延迟100ms确保DOM渲染完成
            }
            
            // 智能解析代码块并应用高亮
            function applyCodeHighlighting(container) {
                var codeBlocks = container.querySelectorAll('pre code');
                
                codeBlocks.forEach(function(block) {
                    var codeText = block.textContent.trim();
                    var language = '';
                    
                    // 首先尝试从代码块的类名中提取语言信息
                    var classNames = block.className.split(' ');
                    for (var i = 0; i < classNames.length; i++) {
                        if (classNames[i].startsWith('language-')) {
                            language = classNames[i].replace('language-', '');
                            break;
                        }
                    }
                    
                    // 如果从类名中没有提取到语言信息，尝试从代码内容中提取```关键字
                    if (!language) {
                        // 查找代码内容中的```关键字
                        var lines = codeText.split('\n');
                        for (var j = 0; j < lines.length; j++) {
                            var line = lines[j].trim();
                            // 匹配```html、``` html、```HTML、``` HTML等格式
                            if (line.startsWith('```')) {
                                var keyword = line.substring(3).trim();
                                if (keyword) {
                                    language = keyword;
                                    break;
                                }
                            }
                        }
                    }
                    
                    // 如果还是没有提取到语言信息，尝试从内容推断
                    if (!language) {
                        language = detectLanguageFromContent(codeText);
                    }
                    
                    // 更新代码块的类名
                    if (language) {
                        block.className += ' language-' + language;
                    }
                    
                    // 应用语法高亮
                    applySyntaxHighlighting(block, codeText, language);
                    
                    // 添加语言标签
                    addLanguageLabel(block);
                    
                    // 根据语言类型添加功能按钮
                    addCodeBlockButtons(block.parentNode, language, codeText);
                });
            }
            
            // 从代码内容推断语言类型
            function detectLanguageFromContent(codeText) {
                // 检查HTML特征
                if (codeText.includes('<!DOCTYPE') || codeText.includes('<html') || 
                    codeText.includes('<div') || codeText.includes('<p') || 
                    codeText.includes('<span') || codeText.includes('<body')) {
                    return 'html';
                }
                
                // 检查JavaScript特征
                if (codeText.includes('function') || codeText.includes('const ') || 
                    codeText.includes('let ') || codeText.includes('var ') ||
                    codeText.includes('console.log') || codeText.includes('return ')) {
                    return 'javascript';
                }
                
                // 检查CSS特征
                if (codeText.includes('{') && codeText.includes('}') && 
                    codeText.includes(':') && (codeText.includes('color:') || 
                    codeText.includes('margin:') || codeText.includes('padding:'))) {
                    return 'css';
                }
                
                // 检查TypeScript特征
                if (codeText.includes('interface') || codeText.includes('type ') ||
                    codeText.includes(': string') || codeText.includes(': number')) {
                    return 'typescript';
                }
                
                // 默认返回text
                return 'text';
            }
            
            // 应用语法高亮
            function applySyntaxHighlighting(block, codeText, language) {
                // 尝试使用highlight.js
                if (typeof hljs !== 'undefined' && hljs.getLanguage(language)) {
                    try {
                        hljs.highlightElement(block);
                        return;
                    } catch (error) {
                        console.warn('highlight.js高亮失败:', error);
                    }
                }
                
                // 使用备用高亮方案
                if (typeof simpleHighlight !== 'undefined') {
                    var highlighted = simpleHighlight(codeText, language);
                    block.innerHTML = highlighted;
                } else {
                    // 如果都没有，至少添加基础样式类
                    block.className += ' hljs';
                }
            }
            
            // 为代码块添加功能按钮
            function addCodeBlockButtons(preElement, language, codeText) {
                // 检查是否已经有按钮区域
                if (preElement.querySelector('.code-block-buttons')) {
                    return;
                }
                
                var buttonsContainer = document.createElement('div');
                buttonsContainer.className = 'code-block-buttons';
                
                // HTML代码块：添加预览按钮和下载按钮
                if (language === 'html') {
                    var previewButton = createButton('预览', 'preview-button', function() {
                        showHTMLPreview(codeText);
                    });
                    buttonsContainer.appendChild(previewButton);
                }
                
                // 所有代码块：添加下载按钮
                var downloadButton = createButton('下载', 'download-button', function() {
                    downloadCode(codeText, language);
                });
                buttonsContainer.appendChild(downloadButton);
                
                // 将按钮区域插入到代码块顶部
                preElement.insertBefore(buttonsContainer, preElement.firstChild);
            }
            
            // 创建按钮元素
            function createButton(text, className, onClick) {
                var button = document.createElement('button');
                button.className = className;
                button.textContent = text;
                button.addEventListener('click', onClick);
                return button;
            }
            
            // 下载代码功能
            function downloadCode(codeText, language) {
                var blob = new Blob([codeText], { type: 'text/plain' });
                var url = URL.createObjectURL(blob);
                var a = document.createElement('a');
                a.href = url;
                a.download = 'code.' + (language === 'text' ? 'txt' : language);
                a.click();
                URL.revokeObjectURL(url);
            }
            
            // 为代码块添加语言标签
            function addLanguageLabel(block) {
                var pre = block.parentNode;
                // 检查是否已经有语言标签
                if (!pre.querySelector('.code-block-header')) {
                    var language = '';
                    
                    // 从代码块的类名中提取语言信息（只取language-开头的部分）
                    var classNames = block.className.split(' ');
                    for (var i = 0; i < classNames.length; i++) {
                        if (classNames[i].startsWith('language-')) {
                            language = classNames[i].replace('language-', '');
                            break;
                        }
                    }
                    
                    // 如果代码块没有语言类，尝试从内容推断
                    if (!language) {
                        var codeText = block.textContent.trim();
                        language = detectLanguageFromContent(codeText);
                    }
                    
                    // 根据语言类型获取显示文字
                    var displayText = getLanguageDisplayText(language);
                    
                    var header = document.createElement('div');
                    header.className = 'code-block-header';
                    header.innerHTML = `
                        <span class="code-language">${displayText}</span>
                    `;
                    pre.insertBefore(header, block);
                }
            }
            
            // 根据语言类型获取显示文字
            function getLanguageDisplayText(language) {
                // 直接返回原语言标识符（保持原样，不进行任何转换）
                return language;
            }
            
            // 显示HTML预览
            function showHTMLPreview(htmlCode) {
                // 显示预览列和间隔栏
                previewColumn.style.display = 'flex';
                resizeHandle.style.display = 'block';
                
                // 清空预览内容
                previewBody.innerHTML = '';
                
                // 创建iframe用于HTML预览
                var iframe = document.createElement('iframe');
                iframe.className = 'preview-iframe';
                iframe.style.width = '100%';
                iframe.style.height = '100%';
                iframe.style.border = 'none';
                iframe.sandbox = 'allow-scripts allow-same-origin';
                
                // 将iframe添加到预览区域
                previewBody.appendChild(iframe);
                
                // 写入HTML内容到iframe
                var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
                iframeDoc.open();
                iframeDoc.write(htmlCode);
                iframeDoc.close();
            }
            
            // 滚动到底部
            function scrollToBottom() {
                chatHistory.scrollTop = chatHistory.scrollHeight;
            }
            
            // 保存消息到localStorage
            function saveMessage(sender, content) {
                try {
                    // 兼容旧的存储方式
                    var chatData = [];
                    var oldData = localStorage.getItem('demo_ai_chat_history');
                    if (oldData) {
                        chatData = JSON.parse(oldData);
                    }
                    
                    chatData.push({
                        sender: sender,
                        content: content,
                        timestamp: new Date().toISOString()
                    });
                    
                    // 限制历史记录数量
                    if (chatData.length > 50) {
                        chatData = chatData.slice(-50);
                    }
                    
                    localStorage.setItem('demo_ai_chat_history', JSON.stringify(chatData));
                } catch (error) {
                    console.error('保存消息失败:', error);
                }
            }
            
            // 加载聊天历史
            function loadChatHistory() {
                try {
                    var savedHistory = localStorage.getItem('demo_chatHistory');
                    if (savedHistory) {
                        chatHistoryData = JSON.parse(savedHistory);
                        
                        // 渲染对话列表
                        renderChatList();
                        
                        // 加载最后一次对话
                        var chatIds = Object.keys(chatHistoryData);
                        if (chatIds.length > 0) {
                            currentChatId = chatIds[chatIds.length - 1];
                            loadChat(currentChatId);
                        }
                    } else {
                        chatHistoryData = {};
                    }
                } catch (error) {
                    console.error('加载聊天历史失败:', error);
                    chatHistoryData = {};
                }
            }
            
            // 初始化侧边栏
            function initSidebar() {
                // 绑定新建对话按钮事件
                newChatButton.addEventListener('click', createNewChat);
                
                // 获取相关DOM元素
                var toggleSidebarButton = document.getElementById('toggleSidebar');
                var expandSidebarButton = document.getElementById('expandSidebar');
                var sidebar = document.querySelector('.sidebar');
                var chatMainArea = document.querySelector('.chat-main-area');
                
                if (toggleSidebarButton && expandSidebarButton && sidebar && chatMainArea) {
                    // 绑定折叠按钮事件
                    toggleSidebarButton.addEventListener('click', function() {
                        sidebar.classList.add('collapsed');
                        chatMainArea.classList.add('sidebar-collapsed');
                        expandSidebarButton.classList.add('visible');
                    });
                    
                    // 绑定展开按钮事件
                    expandSidebarButton.addEventListener('click', function() {
                        sidebar.classList.remove('collapsed');
                        chatMainArea.classList.remove('sidebar-collapsed');
                        expandSidebarButton.classList.remove('visible');
                    });
                }
            }
            
            // 创建新对话
            function createNewChat() {
                var chatId = Date.now().toString();
                var now = new Date();
                var timeStr = now.getHours() + ':' + (now.getMinutes() < 10 ? '0' : '') + now.getMinutes();
                
                chatHistoryData[chatId] = {
                    id: chatId,
                    title: '新对话',
                    time: timeStr,
                    messages: []
                };
                
                currentChatId = chatId;
                
                // 保存并更新UI
                saveChatHistory();
                renderChatList();
                
                // 清空聊天区域
                chatHistory.innerHTML = '';
                
                // 添加欢迎消息
                var welcomeMessage = {
                    role: 'ai',
                    content: '# 欢迎使用AI助手\n\n我是一个AI助手，可以帮助你解答问题、生成代码示例等。请输入你的问题，我会尽力为你提供帮助。'
                };
                
                // 显示欢迎消息
                addMessageToUI(welcomeMessage);
            }
            
            // 渲染对话列表
            function renderChatList() {
                chatList.innerHTML = '';
                
                // 按时间倒序排序
                var chatIds = Object.keys(chatHistoryData).sort(function(a, b) {
                    return parseInt(b) - parseInt(a);
                });
                
                chatIds.forEach(function(chatId) {
                    var chat = chatHistoryData[chatId];
                    var chatItem = document.createElement('div');
                    chatItem.className = 'chat-item' + (chatId === currentChatId ? ' active' : '');
                    chatItem.dataset.chatId = chatId;
                    
                    chatItem.innerHTML = `
                        <button class="chat-item-delete" aria-label="删除对话">×</button>
                        <div class="chat-item-title">${escapeHtml(chat.title)}</div>
                        <div class="chat-item-time">${chat.time}</div>
                    `;
                    
                    // 点击切换对话
                    chatItem.addEventListener('click', function(e) {
                        if (!e.target.closest('.chat-item-delete')) {
                            loadChat(chatId);
                        }
                    });
                    
                    // 点击删除对话
                    var deleteBtn = chatItem.querySelector('.chat-item-delete');
                    deleteBtn.addEventListener('click', function(e) {
                        e.stopPropagation();
                        deleteChat(chatId);
                    });
                    
                    chatList.appendChild(chatItem);
                });
            }
            
            // 加载对话
            function loadChat(chatId) {
                if (!chatHistoryData[chatId]) return;
                
                currentChatId = chatId;
                
                // 更新活跃状态
                var chatItems = document.querySelectorAll('.chat-item');
                chatItems.forEach(function(item) {
                    item.classList.toggle('active', item.dataset.chatId === chatId);
                });
                
                // 清空聊天区域
                chatHistory.innerHTML = '';
                
                // 如果是新对话，添加欢迎消息
                if (chatHistoryData[chatId].messages.length === 0) {
                    var welcomeMessage = {
                        role: 'ai',
                        content: '# 欢迎使用AI助手\n\n我是一个AI助手，可以帮助你解答问题、生成代码示例等。请输入你的问题，我会尽力为你提供帮助。'
                    };
                    addMessageToUI(welcomeMessage);
                    // 添加预览按钮
                    setTimeout(addPreviewButtons, 200);
                } else {
                    // 加载所有消息
                    chatHistoryData[chatId].messages.forEach(function(message) {
                        addMessageToUI(message);
                    });
                    // 添加预览按钮
                    setTimeout(addPreviewButtons, 200);
                }
            }
            
            // 删除对话
            function deleteChat(chatId) {
                if (!chatHistoryData[chatId]) return;
                
                // 移除对话
                delete chatHistoryData[chatId];
                saveChatHistory();
                renderChatList();
                
                // 如果删除的是当前对话，创建新对话
                if (chatId === currentChatId) {
                    if (Object.keys(chatHistoryData).length > 0) {
                        // 加载第一个对话
                        var firstChatId = Object.keys(chatHistoryData)[0];
                        loadChat(firstChatId);
                    } else {
                        createNewChat();
                    }
                }
            }
            
            // 添加消息到UI
            function addMessageToUI(message) {
                var messageElement;
                if (message.role === 'user') {
                    messageElement = createMessageElement('user', message.content, false);
                } else {
                    messageElement = createMessageElement('ai', message.content, true);
                }
                
                chatHistory.appendChild(messageElement);
                scrollToBottom();
            }
            
            // 保存聊天历史
            function saveChatHistory() {
                try {
                    localStorage.setItem('demo_chatHistory', JSON.stringify(chatHistoryData));
                } catch (error) {
                    console.error('保存聊天历史失败:', error);
                }
            }
            
            // 生成模拟AI回复
            function generateSimulatedResponse(userMessage) {
                // 简单的关键词匹配来生成模拟回复
                var responseMap = {
                    'html': `这是一个简单的HTML页面示例：

\`\`\`html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>示例页面</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            color: #333;
        }
        h1 {
            color: #4285f4;
            text-align: center;
        }
        .card {
            background: #f9f9f9;
            border-radius: 8px;
            padding: 20px;
            margin: 20px 0;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        button {
            background: #4285f4;
            color: white;
            border: none;
            padding: 10px 15px;
            border-radius: 4px;
            cursor: pointer;
        }
        button:hover {
            background: #3367d6;
        }
    </style>
</head>
<body>
    <header>
        <h1>欢迎使用示例页面</h1>
    </header>
    
    <main>
        <div class="card">
            <h2>这是一个示例卡片</h2>
            <p>这里展示了一个简单的HTML页面结构，包含了基本的CSS样式。</p>
            <button onclick="alert('按钮被点击了！')">点击我</button>
        </div>
    </main>
    
    <footer>
        <p>&copy; 2023 示例页面</p>
    </footer>
</body>
</html>
\`\`\``,
                    'javascript': `JavaScript的异步编程是一种处理耗时操作的方式，让程序在等待某些操作完成时不会阻塞。主要有以下几种实现方式：

## 1. 回调函数(Callbacks)

\`\`\`javascript
function fetchData(callback) {
    setTimeout(function() {
        callback(null, '数据获取成功');
    }, 1000);
}

fetchData(function(error, data) {
    if (error) {
        console.error(error);
    } else {
        console.log(data);
    }
});
\`\`\`

## 2. Promise

\`\`\`javascript
function fetchData() {
    return new Promise(function(resolve, reject) {
        setTimeout(function() {
            resolve('数据获取成功');
        }, 1000);
    });
}

fetchData()
    .then(function(data) {
        console.log(data);
    })
    .catch(function(error) {
        console.error(error);
    });
\`\`\`

## 3. Async/Await

\`\`\`javascript
function fetchData() {
    return new Promise(function(resolve) {
        setTimeout(function() {
            resolve('数据获取成功');
        }, 1000);
    });
}

async function processData() {
    try {
        var data = await fetchData();
        console.log(data);
    } catch (error) {
        console.error(error);
    }
}

processData();
\`\`\``,
                    '性能优化': `前端性能优化可以从多个方面入手：

## 1. 资源优化

- **压缩文件**：使用工具压缩HTML、CSS、JavaScript文件
- **图片优化**：使用适当的格式（WebP、AVIF），响应式图片，延迟加载
- **代码分割**：按需加载JavaScript代码

\`\`\`javascript
// 动态导入示例
import('./heavyModule.js').then(function(module) {
    module.doSomething();
});
\`\`\`

## 2. 缓存策略

- 设置适当的HTTP缓存头
- 使用Service Worker进行缓存
- 利用浏览器缓存

## 3. 渲染优化

- 减少DOM操作
- 使用虚拟DOM
- 避免布局抖动

\`\`\`javascript
// 优化前：每次都触发重排
for (var i = 0; i < 100; i++) {
    element.style.left = element.offsetLeft + 10 + 'px';
}

// 优化后：批量修改
var left = element.offsetLeft;
for (var i = 0; i < 100; i++) {
    left += 10;
}
element.style.left = left + 'px';
\`\`\`

## 4. 网络优化

- 使用CDN
- 减少HTTP请求数
- 使用HTTP/2或HTTP/3`
                };
                
                // 检查关键词并返回对应的回复
                for (var keyword in responseMap) {
                    if (userMessage.toLowerCase().includes(keyword)) {
                        return responseMap[keyword];
                    }
                }
                
                // 默认回复
                return `感谢您的提问！以下是一些常见的代码示例：

## JavaScript示例
\`\`\`javascript
// 简单的函数示例
function greet(name) {
    return 'Hello, ' + name + '!';
}

console.log(greet('World')); // 输出: Hello, World!
\`\`\`

## CSS示例
\`\`\`css
.button {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.3s;
}

.button:hover {
    background-color: #45a049;
}
\`\`\`

## SQL示例
\`\`\`sql
-- 简单的查询语句
SELECT users.name, orders.order_date, orders.total_amount
FROM users
JOIN orders ON users.id = orders.user_id
WHERE orders.order_date > '2023-01-01'
ORDER BY orders.total_amount DESC
LIMIT 10;
\`\`\`

您可以继续提问更具体的问题，我会为您提供更详细的解答。`;
            }
            
            // HTML转义
            function escapeHtml(text) {
                var div = document.createElement('div');
                div.textContent = text;
                return div.innerHTML;
            }
        }
        
        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            initApp();
        });
    </script>
</body>
</html>